<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>英邦国际物流-跟踪查询</title>
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<link rel="stylesheet" href="css/common.css" />
		<link href="css/index.css" rel="stylesheet" />
		<link rel="stylesheet" href="iconfont/iconfont.css" />
		
		<script src="js/jquery1.12.4.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<script type="text/javascript" src="js/font.js"></script>

	</head>

	<body>
		<nav class="navbar navbar-default">
			<div class="container">
				<div class="mynav hidden-xs">
					<div class="logo"><img src="images/logo.png" /></div>
					<div class="tel"><span></span><label>020-86213617</label></div>
					<div class="nav">
						<ul>
							<li>
								<a href="index.html">首页</a>
							</li>
							<li class="active">
								<a href="order.html">跟踪查询</a>
							</li>
							<li>
								<a href="#">关于我们</a>
							</li>
							<li>
								<a href="#">联系我们</a>
							</li>
						</ul>
					</div>
				</div>

				<div class="navbar-header visible-xs">
					<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-hide-content" aria-expanded="false">
		        <span class="sr-only">Toggle navigation</span>
		        <span class="icon-bar"></span>
		        <span class="icon-bar"></span>
		        <span class="icon-bar"></span>
		      </button>
					<a class="navbar-brand" href="/">
						<img class="logo-xs" src="images/logo.png" />
					</a>
				</div>

				<div class="collapse" aria-expanded='false' id="navbar-hide-content">
					<ul class="nav">
						<li>
							<a href="index.html">首页</a>
						</li>
						<li class="active">
							<a  href="order.html">跟踪查询</a>
						</li>
						<li>
							<a href="#">关于我们</a>
						</li>
						<li>
							<a href="#">联系我们</a>
						</li>
					</ul>
				</div>
			</div>
		</nav>

		<!--<div class="order-check-box">
			<div class="container">
				<div class="col-xs-12">
					<div class="search-box">
						<div class="search-item-bg search-item-bg-click">
							<div class="count-box">
								<div class="count" id="count" onmousewheel="return false">
									<div class="count-item">1.</div>
								</div>
							</div>
							
							<div class="clear-box">
								<div class="clear" id="clear"  onmousewheel="return false">
								</div>
							</div>

							<div class="textarea-box">
								<textarea id="trackingNumber" placeholder="每行输入一个单号，最多输入40个单号"></textarea>
							</div>
							

						</div>
						&lt;!&ndash;按钮&ndash;&gt;
						<div class="check-btn-box">
							<div class="btn-common btn-check" id="goSelect">查询</div>
							<div class="btn-common btn-clear">清空</div>
						</div>
					</div>
				</div>
			</div>
		</div>-->
		<div class="order-check-box">
			<div class="container">
				<div class="col-xs-12">
					<div class="outer-box">
						<div class="search-box">
							<div class="search-item-bg search-item-bg-click">
								<div class="count-box">
									<div class="count" id="count" onmousewheel="return false">
										<div class="count-item">1.</div>
									</div>
								</div>

								<div class="clear-box">
									<div class="clear" id="clear"  onmousewheel="return false">
									</div>
								</div>

								<div class="textarea-box">
									<textarea id="trackingNumber" placeholder="每行输入一个单号，最多输入40个单号"></textarea>
								</div>
							</div>

							<div class="check-btn-box">
								<div class="btn-common btn-check" id="goSelect">查询</div>
								<div class="btn-common btn-clear">清空</div>
							</div>
						</div>
						<div class="advertise">
							<a  href="http://www.17track.net"  target="_blank" class="adv1"></a>
							<a  href="http://www.idoapp.cn/"  target="_blank" class="adv2"></a>
						</div>

					</div>
				</div>
			</div>
		</div>

		<div class="container">
			<div class="col-xs-12">
				<div class="nav-order-status">
					<ul class="clear-float">
						<li class="active" onclick="changeList(0,this)"><i class="iconfont icon-all" style="font-size: .14rem;"></i>所有(<span id="status_all">0</span>)<span class="line"></span></li>
						<li onclick="changeList(1,this)"><i class="iconfont icon-ok" style="font-size: .15rem;"></i>成功签收(<span id="status_ok">0</span>)<span  class="line"></span></li>
						<li onclick="changeList(2,this)"><i class="iconfont icon-air" style="font-size: .18rem;"></i>运输途中(<span id="status_tracking">0</span>)<span  class="line"></span></li>
						<li onclick="changeList(3,this)"><i class="iconfont icon-unknow" style="font-size: .17rem;"></i>查询不到(<span id="status_not_find">0</span>)<span  class="line"></span></li>
					</ul>
					<div class="extend" id="extend" onclick="toggle(this)"><i class="iconfont icon-add"></i><span id="toggle_text" data-state="0">展开全部</span></div>
				</div>
				<div class="status-content">
					<ul class="header">
						<li class="clear-float">
							<div class="track-number">运单号<span>(状态)</span></div>
							<div class="track-content">物流信息</div>
						</li>
					</ul>
					<ul class="content" id="content"></ul>
				</div>
			</div>
		</div>

		<footer>
			<div class="links">
				<div class="container">
					<ul>
						<li>友情链接　/　LINKS　</li>
						<li><a href="http://www.17track.net" target="_blank">17TRACK-全球物流查询平台</a></li>
						<li><a href="http://www.ruston.cc/" target="_blank">俄速通</a></li>
						<li><a href="http://www.sprintpack.com.cn/" target="_blank">欧速通</a></li>
						<li><a href="order.html" target="_blank">包裹查询</a></li>
					</ul>
				</div>
			</div>

			<div class="company-info">
				<div class="container">
					<div class="row">
						<div class="col-xs-12 col-sm-6">
							<div class="info-item-box">
								<ul>
									<li><a>走进英邦</a></li>
									<li><a>关于我们</a></li>
									<li><a>企业文化</a></li>
									<li><a>发展历程</a></li>
									<li><a>合作伙伴</a></li>
									<li><a>公司荣誉</a></li>
								</ul>
								<ul>
									<li><a>咨询中心</a></li>
									<li><a>新闻公告</a></li>
									<li><a>行业动态</a></li>
								</ul>
								<ul>
									<li><a>人才招聘</a></li>
									<li><a>人才理念</a></li>
									<li><a>招聘职位</a></li>
									<li><a>员工风采</a></li>
								</ul>
								<ul>
									<li><a>客户服务</a></li>
									<li><a>常见问题</a></li>
									<li><a>订单咨询</a></li>
									<li><a>在线客服</a></li>
								</ul>
							</div>
						</div>
						<div class="col-xs-12 col-sm-6">
							<div class="qr-code-box clear-float">
								<div class="qr-code">
									<img src="images/code.png"/>
									<div>微信公众号</div>
								</div>
								<div class="qr-code">
									<img src="images/code.png"/>
									<div>官方微博</div>
								</div>
							</div>
							<div class="btn-tel">
								<span class="cursor-pointer">020-86213617</span>
							</div>
						</div>
					</div>
				</div>
			</div>


			<div class="copyright">
				Copyright © 2009 3856.cc  All Rights Reserved   深圳英邦物流有限公司版权所有
			</div>


		</footer>
		<script>
			function selectDetail() {
				var trackNumber = $("#trackingNumber").val();
				if(!!!trackNumber){
					return false
				}
				else{
					goSelectText(trackNumber)
				}
			}
			$(function(){
				var con = '';
				var line_num = 0;
				var scroll_top = 0;
				var trackingNumber = getQueryString("trackingNumber");
				if(!!trackingNumber){
					var trackingNumberText = trackingNumber.replace(/,/g,'\n');
					con = trackingNumberText;
					$("#trackingNumber").val(trackingNumberText);

					var linesNumber = trackingNumber.split(',').length;//获取行数
					addNumber(linesNumber);
					addClear(linesNumber);
					goSelect(trackingNumber);
				}

				$("#goSelect").on("click",function(){
					selectDetail();
				});

				/*展示一条所有运输信息*/
				$("#content").on('click','.show-more',function(){
					var li = $(this).parents('li');
					if(li.hasClass('showall')){
						li.removeClass('showall');
					}else{
						li.addClass('showall');
					}
				});

				$('#trackingNumber').keyup(function(){addslider()});

				function addslider() {
					con = $('#trackingNumber').val();
					var i = con.split('\n').length;//获取行数
					if(i!=line_num){
						line_num = i;
						addNumber(line_num);
						addClear(line_num);
					}
				}
				


				

				$("#trackingNumber").scroll(function(){
					addslider();
					var s = $('#trackingNumber').scrollTop();
					if(s!=scroll_top){
						scroll_top = s;
						scroll(scroll_top)
					}
				});

				$("#clear").on('click','.clear-item span',function(){
					var t = $(this).parent().attr('id');
					var old_arr = con.split('\n');
					var new_arr = old_arr.splice(t,1);
					con = old_arr.join('\n');
					$('#trackingNumber').val(con);

					var j = con.split('\n').length;//获取行数
					if(j!=line_num){
						line_num = j;
						addNumber(line_num);
						addClear(line_num);
					}
				});


			});
			function getQueryString(name) {
				var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
				var r = window.location.search.substr(1).match(reg);
				if (r != null) {
					return unescape(r[2]);
				}
				return null;
			}
			function goSelectText(trackingNumberText){
				var trackingNumber = $("#trackingNumber").val().replace(/\n/g,",");
				goSelect(trackingNumber);
			}
			var html = '';
			var all_array = [];
			var ok_array = [];
			var tracking_array = [];
			var not_find_array = [];

			function render(data){
				var html_arr = [];
				var track_detail_html = '';
				for (var i in data) {
					var track_detail_arr = [];
					var trackDetails = data[i].trackDetails;
					for (var j in trackDetails) {
						track_detail_arr[j] = '<div class="track-item">' +
								'<div><div class="first-line"></div><div class="last-line"></div><div class="solid-point"></div></div>' +
								'<div class="time">' + trackDetails[j].track_date + '</div>' +
								'<div class="address">' + trackDetails[j].track_location + '，' + trackDetails[j].track_content + '</div></div>'

					}
					var track_detail_html = track_detail_arr.join('');

					html_arr[i] = '<li class="clear-float">' +
							'<div class="track-number">' +
							'<label>' + data[i].trackingNumber + '</label><span>(' + data[i].statusString + ')</span>' +
							'</div>' +
							'<div class="track-content">' +
							'<span class="show-more"></span>' +
							'<div class="track-items">' + track_detail_html + '</div></div></li>'
				}
				return html_arr;
			}

//			切换列表
			function changeList(state,dom) {
				$('#content').empty();
				if(state==0){
					html = render(all_array).join('');
				}else if(state==1){
					html = render(ok_array).join('');
				}else if(state==2){
					html = render(tracking_array).join('');
				}else if(state==3){
					html = render(not_find_array).join('');
				}
				$('#content').append(html)
				$(dom).addClass("active");
				$(dom).siblings().removeClass('active')
			}
			
			function toggle(dom) {
				if(all_array.length==0){
					return ;
				}
				if($('#toggle_text').attr('data-state')==0){
					$('#content').find('li').each(function(){
						$(this).addClass('showall');
					});
					$(dom).find('i').attr('class','iconfont icon-sub');
					$("#toggle_text").text("收起全部");
					$('#toggle_text').attr('data-state',1)
				}else{
					$('#content').find('li').each(function(){
						$(this).removeClass('showall');
					});
					$(dom).find('i').attr('class','iconfont icon-add');
					$("#toggle_text").text("展开全部");
					$('#toggle_text').attr('data-state',0)
				}


			}


			function goSelect(trackingNumber){
				$("#goSelect").removeClass('btn-check').addClass('btn-checking').unbind('click');
				html = '<div  class="loading">正在努力为您加载 . . .</div>'
				$('#content').empty().append(html);
				$('#status_all').text('0');
				$('#status_ok').text('0');
				$('#status_tracking').text('0');
				$('#status_not_find').text('0');
				$.ajax({
					type: 'post',
					url: "tracking/getInfo",
					dataType:"json",
					contentType: "application/json;charset=utf-8;",
					data: JSON.stringify({trackingNumber:trackingNumber}),
					success: function(result){
						$("#goSelect").removeClass('btn-checking').addClass('btn-check').bind('click',function(){selectDetail()});
						all_array=[];
						ok_array=[];
						tracking_array=[];
						not_find_array=[];
						if(result.code == '000000') {
							var data = result.data;
							$('#status_all').text(data.length);
							if (data != null && data != '') {
								for (var i in data) {
									var statusString = "";
									if(data[i].status==0){
										data[i].statusString = "查询不到";
										not_find_array.push(data[i]);
									}else if(data[i].status==1){
										data[i].statusString = "运输途中";
										tracking_array.push(data[i]);
									}else if(data[i].status==2){
										data[i].statusString = "成功签收";
										ok_array.push(data[i]);
									}
									all_array.push(data[i]);
								}
								$('#status_ok').text(ok_array.length);
								$('#status_tracking').text(tracking_array.length);
								$('#status_not_find').text(not_find_array.length);
								html = render(all_array).join('');
							}
							else{
								html = '<div class="error">抱歉，未查询到有效数据。请您核实单号。</div>'
							}
						}else{
							html = '<div  class="error">页面开小差啦~</div>'+result.code;
						}
						$('#content').empty().append(html);
					}
				});
			}
			/*增加行数*/
			function addNumber(num){
				$("#count").empty();
				var i;
				for(i=0;i<num;i++){
					$("#count").append('<div class="count-item">'+(i+1)+'.</div>')
				}
			}
			/*增加叉叉*/
			function addClear(num){
				$("#clear").empty();
				var i;
				for(i=0;i<num;i++){
					$("#clear").append('<div class="clear-item" id="'+i+'"><span></span></div>')
				}
			}

			function scroll(num){
				$("#count").scrollTop(num);
				$("#clear").scrollTop(num);
			}
		</script>
	</body>

</html>